<template>
  <div>
      <t-dialog header="编辑角色" width="800px" mode="modeless" :visible="bodyVisible3" :footer="false" :onClose="bodyClose2" :draggable="true">
          <div slot="body">
              <t-form :data="formData" ref="form" @reset="onReset" @submit="onSubmit" :colon="true">
                <t-form-item label="角色名" name="name">
                   <t-textarea
                    v-model="formData.name"
                    placeholder="请输入角色名"
                    name="description"
                    />
                </t-form-item>
                <t-form-item label="性别" name="gender">
                   <t-radio-group v-model="formData.gender" @change="radiochange">
                        <t-radio value="1">男</t-radio>
                        <t-radio value="2">女</t-radio>
                    </t-radio-group>
                </t-form-item>
                <t-form-item label="角色简介" name="Introduction">
                   <t-textarea
                    v-model="formData.Introduction"
                    placeholder="请输入角色简介"
                    name="description"
                    />
                </t-form-item>
                <div v-for="(item,index) in arr" :key="index" class="forscript">
                    <t-form-item :label="'第'+ item.index + '幕剧本'" :name="item.variable">
                        <t-textarea
                            v-model="formData[item.variable]"
                            placeholder="请输入第一幕剧本"
                            name="description"
                            />
                    </t-form-item>
                    <div v-for="(item,index) in item.scriptroblem" :key="index" class="problem">
                        <t-form-item :label="'问题'+ (index+1)" :name="item.problem">
                            <t-input v-model="formData[item.problem]" placeholder="请输入问题" />
                        </t-form-item>
                        <t-form-item label="问题类型" :name="item.type">
                            <t-select v-model="formData[item.type]" :options="options1" placeholder="请选择问题类型" />
                        </t-form-item>
                    </div>
                    <t-form-item>
                        <t-button style="margin-top:'10px'" @click="addproblem(index)">添加问题</t-button>      
                    </t-form-item>
                </div>
                <t-form-item style="padding-top: 8px">
                    <t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
                    <t-button theme="default" variant="base" type="reset">重置</t-button>
                </t-form-item>
            </t-form>
        </div>
      </t-dialog>
  </div>
</template>

<script>
const INITIAL_DATA = {
  name: '', // 开局剧本
  Introduction: '', // 简介
  roblem: '', // 问题
  roblemtype: '', // 问题类型
  onescript: '', // 剧本
  gender: '', // 性别 
};
export default {
    name: 'editrole',
    props: {
        tent: {
            type: String,
        }
    },
    data() {
        return {
            formData: { ...INITIAL_DATA }, // form数据
            bodyVisible3: false, // 开关
            options1: [
                { label: '架构云', value: '1' },
                { label: '大数据', value: '2' },
                { label: '区块链', value: '3' },
                { label: '物联网', value: '4', disabled: true },
                { label: '人工智能', value: '5' },
            ],
            arr: [], // 循环数据
            index: 0, // 循环的下标
        }
    },
    mounted() {
        this.datawith()
    },

    watch:{
        bodyVisible3 () {
            if (this.tent) {
                if (this.bodyVisible3) {
                    this.datawith()
                }
            }
        }
    },
    methods: {
        // 添加问题
        addproblem (index) {
            this.arr[index].scriptroblem.push(
                {
                    problem: 'problem' + this.index+1,
                    type: 'type' + this.index+1,
                    index: this.index+1,
                }
            )
            this.index++
        },
        // 数据处理
        datawith () {
            // const arr = []
            for(let i = 0; i < Number(this.tent); i++) {
                this.arr.push({
                    variable: 'screen' + i,
                    index: i + 1,
                    scriptroblem: [
                        {
                            problem: 'problem' + i,
                            type: 'type' + i,
                            // index: i + 1,
                        }
                    ]
                })
                this.index = i
            }
        },

        onSubmit () {
            // 提交
            this.$message.success('定义成功')
            this.bodyVisible3 = false;
            this.$emit('tag', this.formData.tag)
        },

        // 性别选择改变触发
        radiochange (e) {
            console.log(e);
            this.$message.success('性别改变')
        },

        onReset () {
            // 重置
            this.$message.success('重置成功');
        },

        // 关闭触发的函数
        bodyClose2 () {
            this.arr = [];
            this.index = 0;
            this.bodyVisible3 = false;
        }
    }
}
</script>

<style lang="less" scoped>
.forscript {
    margin-bottom: 20px;
}
.problem {
    margin-bottom: 20px;
}
</style>